body {
    background-color: #ffffff;
}



.mainContainer{
    position: absolute;
    background-color: #ffffff;
    
    top:0%;
    width: 100%;
    display: flex;
    height: 100%; /* 设置高度为视窗高度 */
    flex-direction: column; /* 垂直方向排列子元素 */

}
.topbar{
    display: flex;
    flex:0.65;
    width: 100%;
    background-color: #ffffff;
    
}
.bottomcontent{
    display: flex;
    flex: 8.5;
    width: 100%;
    background-image: url(../pic/bg1.jpg);
    background-size:cover; /* 背景图片铺满整个容器 */
    background-repeat: no-repeat; /* 不重复平铺背景图片 */
}


#backhome{
    background-color: #ffffff; /* 设置背景颜色为蓝色 */
    color: rgb(7, 0, 0); /* 设置文字颜色为白色 */
    border: none; /* 移除按钮的边框 */
    margin-left: 0.5%;
    border-radius: 20px;
    cursor: pointer; /* 设置鼠标指针为手型 */
    transition: transform 0.3s; /* 添加浮动效果的过渡时间 */

}
#backhome:hover {
    background-color: #e8eff0; /* 设置背景颜色为蓝色 */

}
#backhome:active {
    transform: translateY(-5px); /* 当鼠标悬停时向上浮动5像素 */
}
#search {
    /* 添加按钮的样式 */
    background-color: #ffffff; /* 设置背景颜色为蓝色 */
    color: rgb(7, 0, 0); /* 设置文字颜色为白色 */
    border: none; /* 移除按钮的边框 */
    margin: 0px 20px 0px 20px;
    border-radius: 20px;
    cursor: pointer; /* 设置鼠标指针为手型 */
    transition: transform 0.3s; /* 添加浮动效果的过渡时间 */
}

#search:hover {
    background-color: #e8eff0; /* 设置背景颜色为蓝色 */

}
#search:active {
    transform: translateY(-5px); /* 当鼠标悬停时向上浮动5像素 */
}

#feedback {
    /* 添加按钮的样式 */
    background-color: #ffffff; /* 设置背景颜色为蓝色 */
    color: rgb(7, 0, 0); /* 设置文字颜色为白色 */
    border: none; /* 移除按钮的边框 */
    margin: 0px 20px 0px 20px;
    border-radius: 20px;
    cursor: pointer; /* 设置鼠标指针为手型 */
    transition: transform 0.3s; /* 添加浮动效果的过渡时间 */
}

#feedback:hover {
    background-color: #e8eff0; /* 设置背景颜色为蓝色 */

}
#feedback:active {
    transform: translateY(-5px); /* 当鼠标悬停时向上浮动5像素 */
}
#videoExample {
    /* 添加按钮的样式 */
    background-color: #ffffff; /* 设置背景颜色为蓝色 */
    color: rgb(7, 0, 0); /* 设置文字颜色为白色 */
    border: none; /* 移除按钮的边框 */
    margin: 0px 20px 0px 20px;
    border-radius: 20px;
    cursor: pointer; /* 设置鼠标指针为手型 */
    transition: transform 0.3s; /* 添加浮动效果的过渡时间 */
}

#videoExample:hover {
    background-color: #e8eff0; /* 设置背景颜色为蓝色 */

}
#videoExample:active {
    transform: translateY(-5px); /* 当鼠标悬停时向上浮动5像素 */
}

#userLogin {
    /* 添加按钮的样式 */
    background-color: #ffffff; /* 设置背景颜色为蓝色 */
    color: rgb(7, 0, 0); /* 设置文字颜色为白色 */
    border: none; /* 移除按钮的边框 */
    border-radius: 20px;
    font-size: 22px;
    cursor: pointer; /* 设置鼠标指针为手型 */
    top:0%;
    position: relative;
    right:0%;
    transition: transform 0.5s; /* 添加浮动效果的过渡时间 */
}

#userLogin:hover {
    transform: scale(1.1); /* 当鼠标按下时向上浮动5像素并放大1.1倍 */

}
#userLogin:active {
    transform: translateY(-5px); /* 当鼠标悬停时向上浮动5像素 */
}



#uploadButton {
    background: linear-gradient(to top, #043d6b, rgb(150, 226, 239)); /* 设置按钮背景为渐变色 */
    color: white; /* 设置文字颜色为白色 */
    border: none; /* 移除按钮的边框 */
    width: 150px;
    margin-left: 350px;
    margin-right: 15px;
    padding: 10px 20px; /* 设置按钮内边距 */
    cursor: pointer; /* 设置鼠标指针为手型 */
    border-radius: 20px;
    transition: transform 0.3s; /* 添加浮动效果的过渡时间 */
}

#uploadButton:hover {
    /* 设置按钮悬停时的样式，可以根据需要修改 */
    background: linear-gradient(to top, #0580b9, #2ba2b1); /* 改变渐变色方向 */
}

#uploadButton:active
{
    transform: translateY(-5px); /* 当鼠标悬停时向上浮动5像素 */
}

select{
    position: relative;
    display: inline-block;
    margin-left: -12px;
    font-size: 16px; /* 字体大小 */
    border: 1px solid #ccc; /* 边框样式 */
    border-radius: 20px; /* 边框圆角 */
    background-color: #fff; /* 背景颜色 */
    appearance: none; /* 去除默认样式 */

    
}
select:hover{
    background-color: #e6f2f4; /* 设置背景颜色为蓝色 */

}






